<script setup lang="ts">
import { reactive } from "vue";
import JShare from "@/components/j-share/index.vue";
const operate = reactive({
    sys: {
        active: false,
        val: 125
    },
    up: {
        active: false,
        val: 95
    },
    share: {
        active: false,
        val: ""
    }
});

const down = function (ent: any) {
    console.log(ent);
};
</script>
<template>
    <div class="operate">
    <!-- <div class="btn d-flex">
            <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>dianzan</title>
                <g id="主页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="icon" transform="translate(-1706.000000, -231.000000)" fill="#848E9C" fill-rule="nonzero">
                        <g id="编组-23" transform="translate(1599.000000, 61.000000)">
                            <g id="编组-18备份-2" transform="translate(10.000000, 70.000000)">
                                <g id="dianzan" transform="translate(97.000000, 100.000000)">
                                    <path
                                        d="M17.9945094,9.78462888 C18.0004362,9.86149468 17.9949473,9.94051468 17.9749774,10.0192736 L16.5349243,16.65258 C16.5147042,16.732057 16.4813794,16.8041901 16.4391251,16.8683428 C16.2848862,17.1897104 16.0503612,17.4739344 15.7385681,17.6809008 C15.4100735,17.8987689 15.0432342,18.0005059 14.6808361,17.9998042 L14.6808361,17.9956426 L5.4308185,17.9915954 C5.39849448,17.9966055 5.36574824,18 5.33204806,18 C5.29825406,18 5.2653827,17.9966055 5.23280847,17.9914648 L2.77238298,17.9903877 C2.73779143,17.9961812 2.70260563,18 2.66643463,18 C2.29831301,18 2,17.6886364 2,17.3045522 L2.00605196,8.95522893 C2.00605196,8.57109577 2.30449007,8.25976479 2.6726117,8.25976479 C2.70011917,8.25976479 2.72706367,8.26200059 2.75375796,8.26549301 L4.96541206,8.26012383 L4.96541206,8.24700278 C7.00035526,8.09500107 8.61281869,6.35406412 8.67036701,4.20627697 C8.6652377,4.14584511 8.66156274,4.08510317 8.66156274,4.02326782 C8.66156274,2.90589039 9.52949471,2 10.6003314,2 C11.5204791,2 12.2891871,2.66961373 12.4877445,3.56682204 L12.4975496,3.56550015 C12.6066881,4.07772667 12.6661912,4.60945523 12.6661912,5.15588784 C12.6661912,5.99840883 12.5283567,6.80708275 12.2761606,7.55963321 L15.9959561,7.56382738 C16.0302036,7.56382738 16.063638,7.56738507 16.0965406,7.57265634 C16.7316833,7.59870258 17.3434001,7.93999653 17.703734,8.54609398 C17.9329577,8.93153273 18.0243939,9.364625 17.9945094,9.78462888 M3.33346352,16.5997695 L4.66620768,16.600357 L4.67122752,9.65177018 L3.33973441,9.65487092 L3.33346352,16.5997695 L3.33346352,16.5997695 Z M16.5788831,9.27277772 C16.4507755,9.05721076 16.2244918,8.94390306 15.9977076,8.95666507 L15.9977076,8.95460879 C15.9971603,8.95460879 15.9965504,8.95460879 15.9960187,8.95460879 L11.2941015,8.94951704 C10.9261206,8.94951704 10.6276982,8.63803919 10.6276982,8.25392234 C10.6276982,8.14335635 10.653157,8.03910609 10.6972097,7.94627962 L10.6901256,7.94019237 C10.9563648,7.4229557 11.1500274,6.85912628 11.2598384,6.26433839 L11.2681735,6.26456686 C11.2681735,6.26456686 11.3567948,5.88901786 11.3556376,5.16873145 C11.3547149,4.59812935 11.2550531,4.07720443 11.2550531,4.07720443 L11.2500333,4.07720443 C11.2504711,4.0670699 11.2515345,4.05719648 11.2515345,4.04694771 C11.2515345,3.68784896 10.9724721,3.39664018 10.6283706,3.39664018 C10.2840971,3.39664018 10.0050659,3.68783264 10.0050659,4.04694771 C10.0050659,4.06196183 10.0063326,4.07674748 10.0072396,4.09151681 L9.99854484,4.09164737 C9.99854484,4.09164737 10.0091631,4.63462021 9.90527902,5.19771524 C9.86116385,5.43660305 9.79920557,5.65938332 9.74276755,5.83584827 C9.74161033,5.83527708 9.74062513,5.83478749 9.73948354,5.83419998 C9.17857503,7.62381861 7.76814062,9.01107496 6.00542602,9.47837333 L5.99904567,16.6008629 L14.683995,16.6045512 C14.7133322,16.6045512 14.7420125,16.6071786 14.7703175,16.611177 C14.856984,16.599133 14.9426185,16.5678971 15.0212783,16.5156904 C15.1329345,16.4416805 15.213987,16.3366469 15.2614956,16.2181495 L15.2632158,16.2191614 L16.6497239,9.83262513 L16.64436,9.83096052 C16.6997659,9.65035036 16.6821886,9.44658255 16.5788831,9.27277772"
                                        id="形状"
                                    ></path>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
            <span class="c-title-5">125</span>
        </div>
        <div class="btn d-flex">
            <svg width="30px" height="30px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>liulan_pre</title>
                        <g id="主页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="icon_" transform="translate(-1624.000000, -231.000000)" fill="#848E9C" fill-rule="nonzero">
                                <g id="编组-23" transform="translate(1599.000000, 61.000000)">
                                    <g id="编组-18备份-2" transform="translate(10.000000, 70.000000)">
                                        <g id="liulan_pre" transform="translate(15.000000, 100.000000)">
                                            <path
                                                d="M19.9497294,9.75740125 C18.2646559,5.9623702 14.551616,3.50973045 10.5054801,3.50973045 C6.4593443,3.50973045 2.73650745,5.9623702 1.05143393,9.75740125 C0.982855357,9.91889194 0.982855357,10.100569 1.05143393,10.2620596 C2.73650745,14.0570907 6.44954736,16.5097304 10.4956832,16.5097304 C14.541819,16.5097304 18.254859,14.0570907 19.9399325,10.2620596 C20.018308,10.100569 20.018308,9.91889194 19.9497294,9.75740125 Z M10.4956832,15.2985503 C6.98837901,15.2985503 3.77498299,13.2294509 2.23686356,10.0097304 C3.78477993,6.79000995 6.99817595,4.72091057 10.4956832,4.72091057 C14.0029874,4.72091057 17.2163834,6.79000995 18.7545028,10.0097304 C17.2163834,13.2395441 14.0029874,15.2985503 10.4956832,15.2985503 Z"
                                                id="形状"
                                            ></path>
                                            <path
                                                d="M10.4956832,6.9918733 C8.87918825,6.9918733 7.56639842,8.34435778 7.56639842,10.0097304 C7.56639842,11.6751031 8.87918825,13.0275876 10.4956832,13.0275876 C12.1121781,13.0275876 13.424968,11.6751031 13.424968,10.0097304 C13.424968,8.34435778 12.1121781,6.9918733 10.4956832,6.9918733 Z M10.4956832,11.8164075 C9.52578623,11.8164075 8.74203111,11.008954 8.74203111,10.0097304 C8.74203111,9.01050684 9.52578623,8.20305343 10.4956832,8.20305343 C11.4655802,8.20305343 12.2591322,9.01050684 12.2591322,10.0097304 C12.2591322,11.008954 11.4655802,11.8164075 10.4956832,11.8164075 Z"
                                                id="形状"
                                            ></path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                    <span class="c-title-5">900</span>
                </div> -->
        <JShare class="btn d-flex">
            <svg width="20px" class="btn-share" height="20px" viewBox="0 0 20 20" version="1.1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title></title>
                <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="share_" transform="translate(-1791.000000, -231.000000)" fill="#88939E" fill-rule="nonzero">
                        <g  transform="translate(1599.000000, 61.000000)">
                            <g  transform="translate(10.000000, 70.000000)">
                                <g id="zhuanfa_nor" transform="translate(182.000000, 100.000000)">
                                    <g id="13" transform="translate(3.000000, 1.000000)">
                                        <path
                                            d="M5.70895522,7.94776119 C5.48507463,7.94776119 5.26119403,7.8358209 5.14925373,7.7238806 C5.03731343,7.3880597 5.03731343,7.05223881 5.37313433,6.94029851 L10.0746269,3.69402985 C10.2985075,3.47014925 10.6343284,3.58208955 10.858209,3.80597015 C11.0820896,4.02985075 10.9701493,4.36567164 10.7462687,4.58955224 L5.93283582,7.8358209 C5.93283582,7.8358209 5.82089552,7.94776119 5.70895522,7.94776119 Z"
                                            ></path>
                                        <path
                                            d="M8.95522388,14.2164179 C8.84328358,14.2164179 8.73134328,14.2164179 8.61940299,14.1044776 L5.26119403,11.1940299 C4.92537313,10.9701493 4.92537313,10.6343284 5.03731343,10.4104478 C5.26119403,10.1865672 5.59701493,10.1865672 5.82089552,10.2985075 L9.17910448,13.2089552 C9.40298507,13.4328358 9.40298507,13.7686567 9.29104478,13.9925373 C9.17910448,14.1044776 9.06716418,14.2164179 8.95522388,14.2164179 Z"
                                            ></path>
                                        <path
                                            d="M12.2014925,5.59701493 C10.6343284,5.59701493 9.40298507,4.36567164 9.40298507,2.79850746 C9.40298507,1.23134328 10.6343284,0 12.2014925,0 C13.7686567,0 15,1.23134328 15,2.79850746 C15,4.36567164 13.7686567,5.59701493 12.2014925,5.59701493 Z M12.2014925,1.11940299 C11.3059701,1.11940299 10.5223881,1.90298507 10.5223881,2.79850746 C10.5223881,3.69402985 11.3059701,4.47761194 12.2014925,4.47761194 C13.0970149,4.47761194 13.880597,3.69402985 13.880597,2.79850746 C13.880597,1.90298507 13.0970149,1.11940299 12.2014925,1.11940299 Z"
                                            ></path>
                                        <path
                                            d="M10.6343284,17.9104478 C9.06716418,17.9104478 7.8358209,16.6791045 7.8358209,15.1119403 C7.8358209,13.5447761 9.06716418,12.3134328 10.6343284,12.3134328 C12.2014925,12.3134328 13.4328358,13.5447761 13.4328358,15.1119403 C13.4328358,16.6791045 12.2014925,17.9104478 10.6343284,17.9104478 Z M10.6343284,13.4328358 C9.73880597,13.4328358 8.95522388,14.2164179 8.95522388,15.1119403 C8.95522388,16.0074627 9.73880597,16.7910448 10.6343284,16.7910448 C11.5298507,16.7910448 12.3134328,16.0074627 12.3134328,15.1119403 C12.3134328,14.2164179 11.5298507,13.4328358 10.6343284,13.4328358 Z"
                                            ></path>
                                        <path
                                            d="M3.35820896,12.3134328 C1.45522388,12.3134328 0,10.858209 0,8.95522388 C0,7.05223881 1.45522388,5.59701493 3.35820896,5.59701493 C5.26119403,5.59701493 6.71641791,7.05223881 6.71641791,8.95522388 C6.71641791,10.858209 5.26119403,12.3134328 3.35820896,12.3134328 Z M3.35820896,6.71641791 C2.12686567,6.71641791 1.11940299,7.7238806 1.11940299,8.95522388 C1.11940299,10.1865672 2.12686567,11.1940299 3.35820896,11.1940299 C4.58955224,11.1940299 5.59701493,10.1865672 5.59701493,8.95522388 C5.59701493,7.7238806 4.58955224,6.71641791 3.35820896,6.71641791 Z"
                                            ></path>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
        </JShare>
    </div>
</template>
<style scoped lang="less">
.operate {
    display: inline-flex;
    height: 20px;

    .btn:not(:first-child) {
        margin-left: 24px;
    }

    .btn-share {
        &:hover {
            #share_ {
                fill: var(--main);
            }
        }
    }

    .btn {
        align-items: flex-end;
        // background-color: blue;

        svg {
            width: 20px;
            height: 20px;
        }

        &:active {
            #icon {
                fill: var(--main);
            }
        }

        span {
            margin-left: 5px;
        }

        :deep(div) {
            height: 20px;
        }
    }
}

:deep(.j-share) {
    display: flex;
    align-items: center;

    .icon-13 {
        font-size: 14px;
        color: #848e9c;

        &:active {
            color: var(--main);
        }
    }
}
</style>
